<template>
	<view class="slide">
		<swiper circular style="height: 370rpx;" @change="(e)=>swiperCurrent = e.detail.current">
			<swiper-item v-for="(item, index) in list" :current="swiperCurrent"
				:class="swiperCurrent !=index?'swiper-item-card-margin':''" class="swiper-item-card" :key="index">

				<view class="view">
					<view style="padding: 20rpx;">
						<view @click="navigateTo('/pages/Home/goodsDetails/goodsDetails?id=' + item.product_id)"
							class="display-flex position-relative">
							<image :src="item.thumbImg"
								:style="swiperCurrent == index?'width: 220rpx;height: 220rpx;':'width: 200rpx;height: 200rpx;'"
								style=" border-radius: 20rpx;" mode=""></image>
							<view class="position-absolute" style="top: 0; left: 0rpx;">
								<image :src="imgaeUrl('/static/shop_top.png')" style="width: 70rpx;height: 76rpx;"
									mode=""></image>
							</view>
							<view class="file-1 display-flex flex-direction-column space-between margin-left-20">
								<view class="font-size-28 webkit-line-clamp" style="-webkit-line-clamp: 2;">
									{{item.title}}
								</view>
								<view class="">
									<view class="display-flex">
										<view class="tabs center-size-20">
											{{item.tags}}
										</view>
									</view>
									<view class="display-flex align-items">
										<view class="margin-top-10" style="color: #FF2E38;">
											<text class="font-size-24 font-weight-bold">￥</text>
											<text class=" font-size-36 font-weight-bold">{{item.price}}</text>
										</view>

									</view>

									<view class="display-flex  align-items">
										<view style="width: 108rpx;font-size: 22rpx;height: 40rpx;"
											class="label center-size-20  color-FFF">
											定向高佣
										</view>
										<view
											style="color: #FF2E38;width: 100rpx;font-size: 22rpx; height: 40rpx;border: none;background: #FFEEEA;"
											class="label1 center-size-20">
											¥{{item.money}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="swiperCurrent == index" class="title display-flex align-items margin-top-20">
							<view class="font-weight-500">
								用户好评:
							</view>
							<view class="file-1 margin-left-20">
								<swiper vertical style="height: 36rpx;" :autoplay="true">
									<swiper-item v-for="citem,cindex in item.comment" :key="index">
										<view class="webkit-line-clamp" style="-webkit-line-clamp: 1;">
											{{citem}}
										</view>
									</swiper-item>
								</swiper>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		imgaeUrl,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	export default {
		props: {
			//轮播图数据源
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		data() {
			return {
				imgaeUrl,
				swiperCurrent: 0
			}
		},
		mounted() {

		},
		methods: {

		}
	};
</script>

<style scoped>
	.title {
		background: #fef8ec;
		color: #ba8441;
		font-size: 26rpx;
		padding: 8rpx 15rpx;
	}

	.swiper-item-card {
		width: 666rpx !important;
	}

	.swiper-item-card-margin {
		padding: 4% 0;
	}

	.center-size-20 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
	}

	.tabs {
		padding: 5rpx 10rpx;
		border-radius: 6rpx;
		border: #FE6740 1rpx solid;
		color: #FE6740;
	}

	.label {
		width: 80rpx;
		height: 32rpx;
		background: linear-gradient(270deg, #FE6740 0%, #FE8B1D 100%);
		border-radius: 6rpx 0 0 6rpx;
	}

	.view {
		background: #FFFFFF;
		/* height: 500rpx; */
		border-radius: 20rpx;
		margin: 0 20rpx;
	}
</style>